<template>
	<div class="alarmConfiguration zy-content">
		<!-- 搜索 -->
		<search :columns="searchData" @getSearch="getSearch(arguments)" key="search"></search>
		<div class="alarmConfiguration">
			<div class="list-layout mt16">
				<!-- 批量删除 批量导出  批量导入 下载模板 新增-->
				<div class="btns clear">
					<span class="title">{{ $t('common.listInformation') }}</span>
					<Button @click="addWareHouse()">{{ $t('common.New') }}</Button>
					<Button @click="exportTemplateClick">{{ $t('common.Export') }}</Button>
					<Button @click="importExcelShow">导入</Button>
					<Button @click="exportTemplate">{{ $t('common.Download') }}</Button>
				</div>
				<!-- 表格 -->
				<div class="tableContent">
					<Table
						class="resizable-table"
						border
						@on-column-width-resize="
							(a, b, c, d) => {
								onColumnWidthResize(a, b, c, d, 'wareHouseManage');
							}
						"
						:columns="wareHouseManageList"
						ellipsis
						ref="selection"
						stripe
						:data="dataArr"
					>
						<template slot-scope="{ row }" slot="storageNum">
							<span class="operationBtn" @click="viewClick(row)">
								<i class="iconfont zy-common-chakan"></i>
								{{ row.storageNum }}
							</span>
						</template>
						<template slot-scope="{ row }" slot="action">
							<span class="operationBtn" @click="delPrrShowH(row)">
								<i class="iconfont zy-common-shanchu"></i>
								{{ $t('common.Delete') }}
							</span>
						</template>
					</Table>
				</div>
				<!-- 分页 -->
				<div class="pageWrap mt16">
					<pageLeftTitle :total="total" :selected="delIds.length" />
					<Page
						:total="total"
						:page-size="pageSize"
						:page-size-opts="pageSizeOption"
						:current="pageNum"
						@on-change="changePageNum"
						@on-page-size-change="changePageSize"
						show-sizer
						show-total
					/>
				</div>
			</div>
			<!-- 新增 -->
			<Modal :mask-closable="false" v-model="addWareDialog" title="新增库位" class="modal-content-layout" width="450">
				<Form ref="form" class="formList" :model="formItem" label-position="top" :rules="rules">
					<Row :gutter="20">
						<Col span="24">
							<FormItem :label="$t('功能位置')" prop="mlocationCode">
								<Cascader
									clearable
									ref="cascader"
									:data="orgList"
									v-model="formItem.mlocationCode"
									change-on-select
									@on-change="change"
									placeholder="请选择"
								></Cascader>
							</FormItem>
						</Col>
						<Col span="24">
							<FormItem :label="$t('库区')" prop="mreservoir">
								<Input v-model="formItem.mreservoir" filterable clearable :placeholder="`${$t('common.inputInfo')}`"></Input>
							</FormItem>
						</Col>
						<Col span="24">
							<FormItem :label="$t('库位')" prop="mwarehouse">
								<Input v-model="formItem.mwarehouse" filterable clearable :placeholder="`${$t('common.inputInfo')}`"></Input>
							</FormItem>
						</Col>
						<Col span="24">
							<FormItem label="工装编号" prop="mwarehouse">
								<Select :remote-method="remoteMethod" :max-tag-count="3" multiple v-model="formItem.moldCold" filterable>
									<Option v-for="item in moldList" :value="item.moldCodes" :key="item.moldCode" :label="item.moldCode"></Option>
								</Select>
							</FormItem>
						</Col>
					</Row>
				</Form>
				<div slot="footer">
					<Button type="default" @click="addWareDialog = false">
						{{ $t('common.Cancle') }}
					</Button>
					<Button type="primary" :loading="loading" @click="addOk('form')">
						{{ $t('maintenance.Confirmed') }}
					</Button>
				</div>
			</Modal>
			<Modal :mask-closable="false" v-model="infoDialogView" title="工装详情" class="modal-content-layout" width="50%">
				<div class="searchBox search-box-layout">
					<Row :gutter="24">
						<Col span="8">
							<div>
								<p class="label">工装编号</p>
								<div class="ipt">
									<Input v-model="moldCode"></Input>
								</div>
							</div>
						</Col>
						<Col span="8">
							<div>
								<p class="label hide-label">--</p>
								<div class="ipt">
									<Button class="search-btn" type="primary" @click="changeNum1()">{{ $t('common.Query') }}</Button>
									<Button class="reset-btn" @click="resetSearch()">{{ $t('common.reset') }}</Button>
								</div>
							</div>
						</Col>
					</Row>
				</div>
				<!-- 表格 -->
				<div class="tableContent">
					<Table
						class="resizable-table"
						border
						@on-column-width-resize="onColumnWidthResize"
						:columns="columnsList"
						ellipsis
						ref="selection"
						stripe
						:data="dataArr1"
					></Table>
				</div>
				<div class="pageWrap mt16">
					<pageLeftTitle :total="total1" :selected="delIds.length" />
					<Page
						:total="total1"
						:page-size="pageSize1"
						:page-size-opts="pageSizeOption"
						:current="pageNum1"
						@on-change="changePageNum1"
						@on-page-size-change="changePageSize1"
						show-sizer
						show-total
					/>
				</div>
				<div slot="footer">
					<Button type="default" @click="infoDialogView = false">
						{{ $t('common.Cancle') }}
					</Button>
					<Button type="primary" @click="infoDialogView = false">
						{{ $t('maintenance.Confirmed') }}
					</Button>
				</div>
			</Modal>
			<!-- 请确认是否删除弹框 -->
			<Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
				<div class="icon red">
					<i class="iconfont zy-common-shanchu"></i>
				</div>
				<p class="title">
					<span>{{ $t('common.confirmDelete') }}</span>
				</p>
				<div slot="footer">
					<Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
					<Button type="primary" :loading="loading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
				</div>
			</Modal>
		</div>
		<importExcelModal
			:importExcelStateF="importExcelState"
			v-if="importExcelState"
			url="/dms/moldStoragelocation/import"
			@importExcelChange="importExcelChange"
		></importExcelModal>
	</div>
</template>
<script>
import { searchApi, addApi, getDetail } from '@/api/moldManagement/wareHouseManage.js';
import recursion from '@/util/recursion';
import { findOrgByToken } from '@/api/index.js';
import search from '@/components/curd/searchList.vue';
import importExcelModal from '@/components/importExcelNew.vue';
import fileDownload from 'js-file-download';
import toggleTableOperation from '@/mixins/toggleTableOperation';
export default {
	name: 'storeHouse', //仓库配置
	components: { search, importExcelModal },
	mixins: [toggleTableOperation],
	data() {
		return {
			dataArr1: [],
			moldCode: '',
			rules: {
				mlocationCode: [
					{
						required: true,
						message: `${this.$t('common.selectInfo')}`,
						trigger: 'change',
						type: 'array',
					},
				],
				mreservoir: [
					{
						required: true,
						message: `${this.$t('common.inputInfo')}`,
						trigger: 'blur',
					},
				],
				mwarehouse: [
					{
						required: true,
						message: `${this.$t('common.inputInfo')}`,
						trigger: 'blur',
					},
				],
			},
			importExcelState: false,
			searchData: [
				{
					title: '功能位置',
					key: 'mlocationCode',
					type: 'cascader',
					dicUrl: '/basic/organization/findListByToken?level=0',
					params: {
						label: 'name',
						value: 'code',
						children: 'children',
					},
				},
				{
					title: '库位',
					key: 'mwarehouse',
				},
			],
			columns: [
				{
					title: '功能位置',
					key: 'mlocation',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '库区',
					key: 'mreservoir',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '库位',
					key: 'mwarehouse',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '维护时间',
					key: 'mmaintenanceTime',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '维护人',
					key: 'mmaintainer',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工装详情',
					key: 'storageNum',
					minWidth: 100,
					slot: 'storageNum',
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '操作',
					slot: 'action',
					align: 'center',
					minWidth: 150,
				},
			],
			columns1: [
				{
					title: '工装名称',
					key: 'moldName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '资产编号',
					key: 'assetCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工装编号',
					key: 'moldCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
			],
			checkBtnPermission: {},
			ruleValidate: {
				category: [{ required: true, message: this.$t('common.selectInfo') }],
				name: [{ required: true, message: this.$t('common.inputInfo') }],
				yeiuys: [{ required: true, message: this.$t('common.inputInfo') }],
			},

			addWareDialog: false,
			infoDialogView: false,

			formItem: {},
			allCheck: false,
			loading: false,
			create: false,
			searchParams: {},
			searchParams1: {},

			pageNum: 1,
			pageSize: 10,
			total: 0,

			pageNum1: 1,
			pageSize1: 10,
			total1: 0,
			dataArr: [],
			delFaultCodeShowF: false, //是否显示删除弹窗
			pageSizeOption: [10, 20, 30, 40],
			delIds: '',
			selection: [],
			orgList: [],
		};
	},
	mounted() {
		this.getOrgList();
		this.getTableColumnsWidth(this.columns, 'wareHouseManage');
		this.getTableColumnsWidth(this.columns1);
		this.searchList();
		let itemList = JSON.parse(window.localStorage.getItem('USER_URI'));
		for (let item of itemList) {
			if (item.code == 'moldLedgerAddBtn') {
				this.checkBtnPermission.moldLedgerAddBtn = true;
			}
		}
	},
	methods: {
		remoteMethod(query) {
			// console.log(query !== this.hDataF.deviceName && query !== this.hDataF.deviceId);
			if (query !== '') {
				this.loading1 = true;
				setTimeout(() => {
					this.loading1 = false;
					this.axios({
						url: '/dms/moldinfo/getDeviceTzList',
						method: 'post',
						data: {
							pageNum: 1,
							pageSize: 99,
							moldCode: query,
						},
					}).then((res) => {
						this.moldList = res.data.records || [];
					});
				}, 200);
			} else {
				this.equipmentList = [];
			}
		},
		deleteOk() {
			this.loading = true;
			this.axios({
				method: 'delete',
				url: '/dms/moldStoragelocation/deleteById',
				params: {
					id: this.delIds,
				},
			}).then((res) => {
				this.loading = false;
				if (res.code === 200) {
					this.$Message.success(res.msg);
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
				this.searchList();
				this.delFaultCodeShowF = false;
			});
		},
		delPrrShowH(row) {
			this.delFaultCodeShowF = true;
			this.delIds = row.id;
		},
		resetSearch() {
			this.moldCode = '';
		},
		filterData(arr, code) {
			let temp = [];
			let callback = function (nowArr, code) {
				for (let item of nowArr) {
					if (item.code === code) {
						temp.unshift(item.code);
						callback(arr, item.parentId);
						break;
					} else {
						if (item.children && item.children.length) {
							callback(item.children, code);
						}
					}
				}
			};
			callback(arr, code);
			return temp;
		},
		getSearch(params) {
			this.searchParams = JSON.parse(JSON.stringify(params[0]));
			if (this.searchParams.mlocationCode && this.searchParams.mlocationCode.length !== 0) {
				this.searchParams.mlocationCode = [this.searchParams.mlocationCode[this.searchParams.mlocationCode.length - 1]];
			}
			this.pageNum = 1;
			this.searchList();
		},
		change(val) {
			this.formItem.mlocationCode = val;
			this.formItem.mlocation = this.$refs['cascader'].displayRender;
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		viewClick(row) {
			this.moldCode = '';
			this.row = row;
			this.viewMoldInfo();
		},
		changeNum1() {
			this.pageNum1 = 1;
			this.viewMoldInfo();
		},
		changePageSize1(pageSize) {
			this.pageSize1 = pageSize;
			this.viewMoldInfo();
		},
		changePageNum1(val) {
			this.pageNum1 = val;
			this.viewMoldInfo();
		},
		//查询列表
		searchList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
			};
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					this.$set(params, key, this.searchParams[key]);
				}
			}
			searchApi(params).then((res) => {
				if (res.code === 200) {
					this.dataArr = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		//增加或编辑
		addWareHouse(row) {
			this.$refs.form.resetFields();
			this.formItem = {};
			this.addWareDialog = true;
		},
		addOk(name) {
			let { mreservoir, mwarehouse, mlocationCode } = this.formItem;
			let data = {
				mlocationCode,
				mreservoir,
				mwarehouse,
			};
			this.$refs[name].validate((valid) => {
				if (!valid) {
					return;
				} else {
					this.loading = true;
					addApi(data).then((res) => {
						this.loading = false;
						if (res.code === 200) {
							this.changeNum();
							this.$Message.success('新增成功');
							this.addWareDialog = false;
						} else {
							this.$Message.warning({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						}
					});
				}
			});
		},
		viewMoldInfo() {
			getDetail({
				pageNum: this.pageNum1,
				pageSize: this.pageSize1,
				warehouseLocation: this.row.mwarehouse,
				moldCode: this.moldCode,
				id: this.row.id,
			}).then((res) => {
				if (res.code == 200) {
					this.total1 = res.data.total;
					this.dataArr1 = res.data.records;
					this.infoDialogView = true;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		getOrgList() {
			let params = {
				level: 0,
			};
			findOrgByToken(params).then((res) => {
				if (res.code === 200) {
					const obj = {
						label: 'name',
						value: 'code',
						children: 'children',
					};
					this.orgList = recursion.convertTree(res.data, obj);
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		//下载模板
		exportTemplate() {
			const filName = '工装库位导入模板';
			this.axios({
				url: '/dms/moldStoragelocation/locationTemplate',
				method: 'get',
				responseType: 'blob',
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
		//导入
		importExcelShow() {
			this.importExcelState = true;
		},
		importExcelChange(val) {
			this.importExcelState = false;
			if (val === 'success') {
				this.changeNum();
			}
		},
		//导出
		exportTemplateClick() {
			let params = {
				delIds: this.delIds,
			};
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					this.$set(params, key, this.searchParams[key]);
				}
			}
			const filName = '工装库位信息';
			this.axios({
				url: '/dms/moldStoragelocation/exportTz',
				method: 'post',
				responseType: 'blob',
				data: params,
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
	},
};
</script>

<style scoped lang="scss">
.ivu-input-number {
	width: -webkit-fill-available;
}
</style>
